<template>
  <div>
		<!-- 商品图片轮播 -->
    <section class="mdetail_goodsimg">
      <!-- 小程序端用swiper -->
      <wx-swiper class="wx-swiper" :circular="true" :indicator-dots="showIndicator">
        <wx-swiper-item class="wx-swiper-item" v-for="(image,index) in item_detail.img_path" :key="index">
          <img :src="image"/>
        </wx-swiper-item>
      </wx-swiper>

    </section>
		<!-- 商品拍卖状态 -->
     <!-- 预展倒计时-->
    <goods-activity
      v-if="auction_info.active_status==1"
      actType="PaiM"
      :isPaiMStatus="auction_info.active_status"
      :actEndTime="auction_info.start_time"
      @countDownEnd="countDownEnd"></goods-activity>
		<!-- 拍卖中 -->
		<section class="active_shade" v-else>  
		    <div class="active_info">
          <span class="auctioning_title">拍卖中</span>
        </div>
        <div class="active_content_box">
          <div class="active_content_flex">
            <div class="active_content">第{{auction_info.trun}}轮拍卖正在进行中</div>
          </div>
        </div>	
		</section>
   
		<!-- 商品信息 -->
		<section class="auction_goods_info">
			<div class="auction_goods_info-title">
				{{auction_info.item_title}}
			</div>
			<!-- 商品副标题  -->
			<div class="subtitle" v-if="auction_info.fenxiao_slogan">{{auction_info.fenxiao_slogan}}</div>
			<div class="info_bot">
				<p>起拍价
          <i>&yen;</i>
          <b class="fontGilroy">{{getInt(auction_info.start_price)}}</b>
          <em class="fontGilroy">{{getDot(auction_info.start_price)}}</em>
        </p>
				<span class="circusee">{{auction_info.watch_user_count}}人围观</span>
				<span class="apply">{{auction_info.bidding_user_count}}人报名</span>
			</div>
		</section>
     <!-- 服务承诺 -->
		<section class="service_box" v-if="service_promise.length!=0" @click="handleOpenServiceDialog">
			<div  class="service_content">
				<!-- 服务承诺 -->
				<!-- 详情页显示服务承诺 -->
				<div class="shop-server">
	        <span v-for="(service_promise_vo,index) in service_promise" :key="index">
	            <i class="img-promise">
                <img :src="service_promise_vo.img" v-if="service_promise_vo.img"/>
                <img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_promise.png" v-else/>
              </i>
	            {{service_promise_vo.name}}
	        </span>
          <i class="icon-right"></i>
				</div>
			</div>
		</section>
    <!-- 竞拍信息 -->
    <section class="auction_ac_info">
			<dl> 	
				<dd>
					<p>{{auction_info.active_turn}}</p>
					<p>拍卖轮次(轮)</p>
				</dd>
				<dd>
					<p>{{auction_info.round_time}}</p>
					<p>每轮时间(分钟)</p>
				</dd>
				<dd>
					<p>{{auction_info.delay_period}}</p>
					<p>延时周期(分钟)</p>
				</dd>
			</dl>
			<dl>
				<dd>
					<p>{{auction_info.fare_increase}}</p>
					<p>加价幅度(元)</p>
				</dd>
				<dd>
					<p>{{auction_info.deposit}}</p>
					<p>保证金(元)</p>
				</dd>
        <dd>
          <p>{{ auction_info.reserve_price && auction_info.reserve_price > 0 ? '有': '无'}}</p>
					<!-- <p>{{auction_info.reserve_price}}</p> -->
					<!-- <p>保留价({{is_crossBorderDz? mSymbol.name:'元'}})</p> -->
					<p>保留价</p>
        </dd>
          
			</dl>
		</section>
    <!-- 拍卖轮次 -->
		<section class="aution_round" v-if="auction_turn.length!=0">
			<div class="round_box_top" @click="Jump('roundList',{id:item_auction_id})">
				<span>拍卖轮次</span>
        <p>全部<i class="icon-right"></i></p>
			</div>
			<dl v-for="(turn_vo,index) in auction_turn" :key="index">
				<dd><em>第<i>{{turn_vo.turn}}</i>轮</em></dd>
				<dd>出价次数 {{turn_vo.bidding_num}}</dd>
				<dd>
          <span class="underway" v-if="turn_vo.status==1">{{turn_vo.status_name}}</span>
          <span v-else>{{turn_vo.status_name}}</span>
        </dd>
			</dl>
		</section>
    <!-- 拍卖须知 -->
    <!-- 竞拍须知，所有竞拍 -->
    <div class="auction_box">
      <section class="auction_item" @click="Jump('auctionNotice')">
        <span>竞拍须知</span>
        <i class="icon-right"></i>
      </section>
      <section class="auction_item" @click="JumpAllList()">
        <span>所有竞拍</span>
        <i class="icon-right"></i>
      </section>
    </div>
    <div class="" v-if="is_deposit">
      <!-- 拍卖大厅按钮 -->
      <section class="aution_lobby" @click="JumpAuction">
        <span class="btn-radius red-gra-btn"><i></i>出价大厅</span>
      </section>
    </div>
    <div v-else>
      <section class="aution_lobby" @click="Jump('margin',{id:item_auction_id})">
        <span class="btn-radius red-gra-btn">缴纳保证金</span>
      </section>
    </div>
    <!-- 评价 -->
    <div class="block-html" v-if="is_comment">
      <div class="criticism">
          商品评价（{{item_comment.length}}）
      <span class="all_evaluate_right" v-if="item_comment.length>0" @click="handleLinkTo('itemComment',{id:item_detail.item_id})">查看全部<i class="icon-right"></i></span>
      </div>
      <div class="detail-comment-wrap" v-if="item_comment!=0">
        <div class="detail-comment" :class="item_comment.length==1?'width100':''" v-for="(item,index) in item_comment" :key="index" >
          <div class="comment_top clearfix">
            <span class="comment_head_img fl">
              <img :src="item.head_portrait" alt="">
            </span>
            <span class="comment_score fl">
              <b>{{item.mobile}}</b><br/>
              <i><img :src="item.describe_star" alt="" mode="scaleToFill"></i>
            </span>
          </div>
          <p class="comment_content">{{item.detail}}</p>
          <div  class="comment_bottom">
            <span>{{item.sku_name}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 软 详情页start-->
    <section class="detail_logo">
      <span class="liner_detail"></span>
      <span class="detail_content">详情</span>
      <span class="liner_detail"></span>
    </section>
    <section class="mdetail_goodsdet content_detail">
      <section class="mdetail_goodsdet_con">
        <diy-tpl :tplData="diyData._diyHtml"></diy-tpl>
      </section>
    </section>
    <!-- 详情end -->
    <!-- 服务承诺 -->
    <service-promise :visible.sync="serviceDialogVisible" :serviceData="service_promise"></service-promise>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
import { openPage } from '@/utils/utils'
import { getAuctionGoodsDetail, auctionGoodsDetailDiyHtml } from '@/api/activity/activityApi'
import goodsActivity from '@/views/item/components/goodsActivity'
import servicePromise from '../components/servicePromise'
// TODO diy暂时不放
// import DiyCpt from '@/components/diy/index'
import diyTpl from '@/components/diyTpl/index'
import small from '@/smallapp/small'
import { mpShare } from '@/utils/utils'
export default Vue.extend({
  components: {
    goodsActivity,
    servicePromise,
    // DiyCpt
    diyTpl
  },
  data() {
    return {
      item_detail: {},
      auction_info: {},
      auction_turn: [],
      info: {},
      service_promise: [],
      item_comment: [],
      is_deposit: '',
      is_comment: '',
      is_item_detail_blank: '',
      publicHtml: '',
      position: '',
      modulePadding: '',
      description: '',
      diyHtml: '',
      isPreview: false,
      item_auction_id: '',
      serviceDialogVisible: false,
      auction_list: '',
      showIndicator: true,
      diyData: {
        _diyHtml: []
      }
    }
  },
  methods: {
    countDownEnd() {
      this.init()
    },
    init() {
      const query = this.$route.query
      const params = {
        item_auction_id: query.id
      }
      this.item_auction_id = query.id
      this.$loadingWrap.show()
      getAuctionGoodsDetail(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.item_detail = res.data.item_detail
          this.auction_info = res.data.auction_info
          this.auction_turn = res.data.auction_turn
          this.service_promise = res.data.service_promise
          this.item_comment = res.data.item_comment
          this.is_deposit = res.data.is_deposit
          this.is_comment = res.data.is_comment
          this.is_item_detail_blank = res.data.is_item_detail_blank
          this.publicHtml = res.data.publicHtml
          this.position = res.data.position
          this.modulePadding = res.data.modulePadding
          this.description = res.data.description
          this.diyHtml = res.data.diyHtml
          this.isPreview = res.data.isPreview
          this.auction_list = res.data.auction_list
          // 预展时间
          this.time = new Date(this.auction_info.start_time).getTime() - new Date()
          this.timeData = {
            'days':	this.time,
            'hours':	1,
            'minutes':	1,
            'seconds': 1,
            'milliseconds': 1
          }
          // TODO diy暂时不放
          // this.$refs['diy-bottom'].startLayzr()
          // this.$refs['diy-bottom'].startLoadJsMain()
          const option = {
            title: res.data.jsapi_desc,
            imgUrl: res.data.jsapi_img,
            shareParam: ''
          }
          const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : 0
            const sid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').shop_id : 0
            // console.log(small.wxCache('global_login_info'), 'small', `/link/pages/liveList/index?sid=${sid}&pid=${pid}`)
            
            mpShare (true, false, `/goods/pages/detailAuction/index?sid=${sid}&pid=${pid}&id=${query.id}`, option, '')
        } else {
          this.$Error(res.msg)
          setTimeout(() => {
            wx.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      })

      // diy数据
      auctionGoodsDetailDiyHtml(params).then(res => {
        // console.log(res, '22222222')
        this.diyData = res.data
      })
    },
    // 打开服务承诺
    handleOpenServiceDialog() {
      this.serviceDialogVisible = true
    },

    JumpAuction(){
      if(this.auction_info.active_status==1){
        this.$Error('拍卖活动未开始，请耐心等待')
      }else{
        this.$JumpPath(this, 'auctionLobby', {id:this.item_auction_id})
      }
    },

    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    },

    JumpUrl(url, data) {
      // window.location.href = url
      openPage(url)
    },

    JumpAllList() {
      // window.location.href = this.auction_list
      openPage( this.auction_list)
    },
    getInt(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(0, idx) : price
      } else {
        return '0'
      }
    },
    getDot(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(idx) : '.00'
      } else {
        return '.00'
      }
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";
.mdetail_goodsimg{
		height: 620px;
		overflow: hidden;
		.my-swipe {
			height: 620px;
			.van-swipe-item{
				position: relative;
					img{
            width: 100%;
				}
			}
		}
    .wx-swiper{
      height: 620px;
      img{
        width: 100%;
      }
    }
}
.active_shade{
  height: 108px;
  background: #FFF0EB;
  display: flex;
  .active_info{
    background: url(https://img.wifenxiao.com/h5-wfx/images/activity/goods_acution_bg.png);
    background-size: 100% 100%;
    flex: 1;
    line-height: 108px;
    font-size: 32px;
    color: #F7F7F7;
    padding-left: 30px;
  }
  .active_content_flex{
    display: flex;
    align-items: center;
  }
  .active_content_box{
    padding: 0 30px;
    .active_content{
      line-height: 108px;
      font-size: 26px;
      color: #FE1B49;
    }
  }
}
.auction_goods_info{
  padding: 30px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 0 0 20px 20px;
  .auction_goods_info-title{
    @include lineClamp(32px,40px,2);
    font-weight: bold;
    margin-bottom:20px;
  }
  .subtitle{
    font-size: 26px;
    line-height: 20px;
    color: #666;
    margin-bottom: 20px;
  }
  .info_bot{
    p{
      display: inline-block;
      font-size: 26px;
      i{
        display:inline-block;
        font-size: 24px;
        color:#F30C23;
        margin-left: 5px;
        font-weight: bold;
      }
      b{
        display:inline-block;
        font-size: 40px;
        color:#F30C23;
        font-weight: bold;
      }
      em{
        display:inline-block;
        font-size: 28px;
        color:#F30C23;
        font-weight: bold;
      }
    }
    span{
      display: inline-block;
      float:right;
      margin-top: 5px;
      color:#999999;
      font-size: 26px;
    }
    .circusee{
      padding-left: 30px;
      border-left:1px solid #999999;
    }
    .apply{
      padding-right:30px;
    }
  }
}
.aution_round{
  margin-bottom: 20px;
  background:#fff;
  padding:0 30px;
  line-height: 48px;
  padding-bottom:10px;
  border-radius: 20px;
  div.round_box_top{
    padding:20px 0;
    font-size: 28px;
    color:#333;
    border-bottom:1px solid #F7F7F7;
    margin-bottom: 10px;
    span{
      display: inline-block;
    }
    p{
      display: inline-block;
      float:right;
      color:#999;
      font-size: 24px;
    }
  }
  dl{
    width: 100%;
    display: inline-flex;
    display:-webkit-inline-box;
    flex-direction: row;
    font-size: 26px;
    padding:6px 0;
    dd:first-child{
      padding-right:30px;
      em{
        border-right:1px solid #eee;
        padding-right: 24px;
        i{
          color:#DE3535;
        }
      }
    }
    dd:nth-child(2){
      width: 180px;
    }
    dd:last-child{
      width: calc(100% - 280px);
      color:#999;
      .underway{
        display: inline-block;
        padding:6px 10px;
        border:1px solid #eb8686;
        border-radius:6px;
        color:#DE3535;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
.service_box{
	margin-bottom:20px;
  background:#fff url(https://img.wifenxiao.com/h5-wfx/images/item/detail/service_promise.png) bottom/cover no-repeat;
  border-radius: 20px;
  .shop-server{
    height: 96px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
		span{
      font-size: 22px;
			line-height: 1.4;
      color: #666666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // flex: 1;
      i {
        display: inline-block;
        img {
          display: inline-block;
          width: 24px;
          height: 24px;
          vertical-align: -4px;
        }
      }
    }
    .all-class-icon{
      color: #666666;
      font-size: 20px;
      font-weight: bold;
    }
	}	
}
 .auction_ac_info{
  background:#fff;
  color:#666;
  margin-bottom: 20px;
  border-radius: 20px;
  padding-bottom: 50px;
  dl{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    padding-top: 50px;
    dd{
      width: calc(100% / 3);
      display: inline-block;
      text-align: center;
      color: #999999;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        width: 1px;
        height: 60px;
        background:#EDEDED ;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      p:first-child{
        margin-bottom: 20px;
        font-size: 28px;
        color:#333;
      }
    }
    dd:last-child{
      &::after{  
        height: 0;
      }
    }
  }
}
.auction_box{
  background:#fff;
  margin-bottom: 20px;
  border-radius: 20px;
  padding-left: 30px;
  .auction_item{
    line-height: 96px;
    padding-right: 30px;
    border-bottom: 1px solid #EDEDED;
    &:last-child{
      border: 0;
    }
    span{
      font-size: 28px;
    }
    .all-class-icon{
      float: right;
      margin-top: 37px;
    }
  }
}
.aution_lobby{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 11px 30px;
  background: #fff;
  z-index: 99;
  .btn-radius{
    display: block;
    line-height:76px;
    border-radius: 38px;
    text-align: center;
    font-size: 32px;
    color: #fff;
  }
}
.block-html{
  padding: 35px 30px 38px;
  background: #fff;
  border-radius: 20px;
  .criticism {
    font-size: 28px;
    position: relative;
    padding-bottom: 25px;
    .all_evaluate_right {
      font-size: 24px;
      line-height: 28px;
      color: #999999;
      float: right;
      .all-class-icon{
        font-weight: bold;
        width: 16px;
      }
    }
  }
  .detail-comment-wrap{
    overflow-x:auto;
    white-space: nowrap;
  }
  .detail-comment{
    display:inline-block;
    margin-top:24px;
    border-radius: 6px;
    background: #F7F7F7;
    padding: 30px 25px;
    width:626px;
    margin-right:30px;
    &.width100{
      width:690px;
    }
    &:last-child{
      margin-right:0;
    }
    .comment_top {
      padding-bottom: 10px;
      .comment_head_img {
        display: inline-block;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        vertical-align: middle;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .comment_score{
        margin-left:14px;
      }
      b {
        display: inline-block;
        font-weight: normal;
        vertical-align: middle;
        font-size: 28px;
      }
      i {
        img {
          width: 112px;
          height: 16px;
          display: inline-block;
          vertical-align: top;
          margin-top: 9px;
        }
      }
    }

    .comment_content {
      @include lineClamp(26px,34px,2);
    }

    .comment_bottom {
        margin: 5px 0 0;
        color: #999;
    }
  }
}
.detail_logo{
  font-size: 28px;
  text-align: center;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .detail_content{
    padding:0 30px;
  }
  .liner_detail{
    height: 2px;
    width: 165px;
    background: #E6E6E6;
    position: relative;
    &::after{
      content: '';
      position: absolute;
      background:#E6E6E6 ;
      width: 8px;
      height: 8px;
      top: 50%;
      transform: rotate(-45deg) translateY(-50%);
    }
    &:first-child{
       &::after{
         right: -3px;
       }
    }
    &:last-child{
       &::after{
         left: 3px;
       }
    }
  }
}
</style>
